{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">🩺</div>
      <div>
        <h1 class="h1" style="margin:0">Booking #{{ booking.id }}</h1>
        <div class="small">{{ booking.full_name }} · {{ booking.phone }} · {{ booking.email }}</div>
      </div>
      <div style="margin-left:auto;display:flex;gap:8px;flex-wrap:wrap">
        <a class="btn" href="{% url 'website:staff_telehealth_booking_list' %}">← Back</a>
        <a class="btn" href="{% url 'website:emr:staff_patient_list' %}">Open EMR</a>
      </div>
    </div>

    <div class="sep"></div>

    <form method="post">
      {% csrf_token %}
      <div class="grid grid-2">
        <div>
          <label class="label">Status</label>{{ form.status }}
        </div>
        <div>
          <label class="label">Mode</label>{{ form.mode }}
        </div>
        <div>
          <label class="label">Provider</label>{{ form.provider }}
        </div>
        <div>
          <label class="label">Slot</label>{{ form.slot }}
        </div>
        <div>
          <label class="label">Preferred date</label>{{ form.preferred_date }}
        </div>
        <div>
          <label class="label">Preferred time</label>{{ form.preferred_time }}
        </div>
        <div>
          <label class="label">Fee (₦)</label>{{ form.fee_ngn }}
        </div>
        <div>
          <label class="label">Paid?</label>{{ form.is_paid }}
        </div>
      </div>

      <div style="margin-top:12px">
        <label class="label">Symptoms / reason</label>
        {{ form.symptoms_or_reason }}
      </div>

      <div class="row" style="margin-top:14px;gap:10px;flex-wrap:wrap">
        <button class="btn" type="submit">Save changes</button>
        <span class="small">Paystack ref: <strong>{{ booking.paystack_reference|default:"—" }}</strong></span>
      </div>
    </form>
  </div>
</section>
{% endblock %}